<template>
	<div class="trainRobShare train">
		<trainHeader name="邀请好友抢票加速"></trainHeader>
		<div class="trainRobShare_banner">
			<img src="http://h5.kpcx179.com/wximages/train/banner.png" alt="" />
			<div class="trainRobShare_banner_tip">{{tip}}</div>
		</div>
		<div class="trainRobFinish_box_shell" v-if="message">
			<div class="trainRobFinish_box">
				<div class="trainRobFinish_box_all">
					<div v-for="item,key in robTicketSpeedUpObj" :class="{start:key==0,end:key==4,active:key==~~(message.helpNum/10)-1,}">
						<span>{{item.speed}}</span>
						<div class="trainRobFinish_box_all_line" :class="{start:key==0,end:key==4}">
							<span></span>
						</div>
					</div>
				</div>
				<div class="trainRobFinish_box_line">
					<div class="trainRobFinish_box_active" :style="{width:((message.helpNum-10)*2.5) + '%'}"></div>
				</div>
				<div class="trainRobFinish_box_tip" v-if="!isRobTicketEnd">
					<div class="trainRobFinish_box_tip_message">
						再使用<span>{{message.helpNum | getHelpNum}}个</span>加速包，至{{message.helpNum | getRobGrade}}抢票。
					</div>
				</div>
			</div>
		</div>
		<div class="trainRobFinish_button">
			<div v-if="!isRobTicketEnd" @click="help" :class="{active:!isHelpFlag}">	
				<span v-if="isHelpFlag">已为Ta助力</span>
				<span v-else>为Ta助力</span>
			</div>
			<div class="trainRobFinish_btn" @click="toIndex">
				我也要抢票
			</div>
		</div>
		<div class="trainRobFinish_friend" v-if="friendsList.length">
			— 已有{{friendsList.length}}位好友送Ta{{friendsList.length*2}}个加速包 —
		</div>
		<div class="trainRobFinish_friendList" v-if="friendsList.length">
			<div v-for="item,key in friendsList" class="trainRobFinish_friendList_every" v-show="!((key > 9) && !isPicFlag)">
				<div class="trainRobFinish_friendList_headerPic">
					<img :src="item.headPortrait" alt="" />
				</div>
				<div class="trainRobFinish_friendList_nickname font_spill">{{item.nickName | ReChange}}</div>
			</div>
			<div v-for="item in 5" class="trainRobFinish_friendList_every" style="height: 0;"></div>
			<div class="trainRobFinish_friendList_more" @click="changePicFlag" v-if="friendsList.length > 9">
				<img src="http://h5.kpcx179.com/wximages/train/jiantoushang.png" alt="" v-if="isPicFlag"/>
				<img src="http://h5.kpcx179.com/wximages/train/jiantou.png" alt="" v-else/>
			</div>
		</div>
		<div class="trainRobFinish_line"></div>
		<div class="trainRobFinish_rule">
			<div class="trainRobFinish_rule_title">
				— 活动规则 —
			</div>
			<div class="trainRobFinish_rule_content">
				<p>1.每位用户可邀请的好友数量无上限。</p>
				<p>2.您在页面上获得的火车票优惠券均可在小程序内
				使用，其他优惠券请至APP内使用。</p>
				<p>3.如果出现违规行为（如作弊领取、恶意套现等）
				将取消用户的活动资格；同时有权撤销违规交易，
				收回相关优惠券（包括已使用的以及未使用的）；
				必要时将追究违规用户的法律责任。</p>
				<p>4.我们将根据本活动的实际举办情况对活动规则进
				行变动或调整，相关变动或调整将公布在活动页面
				上，并于公布时即时生效。</p>
			</div>
		</div>
	</div>
</template>
<style scoped>
	.trainRobShare {
		background: #fff;
	}
	
	.trainRobShare_banner {
		width: 100%;
		height: 240px;
		position: relative;
		top: 0;
		left: 0;
	}
	
	.trainRobShare_banner > img {
		width: 100%;
		height: 100%;
	}
	
	.trainRobShare_banner_tip {
		position: absolute;
		left: 29px;
		bottom: 14px;
		font-size: 26px;
		color: #ffffff;
	}
	
	.trainRobFinish_box_shell {
		padding: 13px 0px 30px;
		margin-top: 33px;
		
	}
	
	.trainRobFinish_box {
		width: 100%;
	}
	
	.trainRobFinish_box_all {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31px;
	}
	
	.trainRobFinish_box_all > div {
		/*width: 20%;*/
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 24px;
		color: #c8c8c8;
	}
	
	.trainRobFinish_box_all > div.start {
		align-items: flex-start;	
	}
	
	.trainRobFinish_box_all > div.end {
		align-items: flex-end;
	}
	
	.trainRobFinish_box_all > div.active {
		color: #333333;
	}
	
	.trainRobFinish_box_all_line {
		height: 10px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 8px;
		margin-bottom: 5px;
	}
	
	.trainRobFinish_box_all_line.start {
		justify-content: flex-start;	
	}
	
	.trainRobFinish_box_all_line.end {
		justify-content: flex-end;
	}
	
	.trainRobFinish_box_all_line > span {
		width: 2px;
		height: 100%;
		background-color: #cfcfcf;
	}
	
	.trainRobFinish_box_line {
		height: 6px;
		border-radius: 3px;
		background: #E0E1E7;
		margin: 0 31px;
	}
	
	.trainRobFinish_box_line > div {
		width: 100%;
		height: 100%;
		border-radius: 3px;
		background: #FF7C47;
	}
	
	.trainRobFinish_box_tip {
		margin-top: 28px;
		position: relative;
		top: 0;
		left: 0;
		padding: 0 31px;
	}
	
	.trainRobFinish_box_tip_message {
		width: 100%;
		font-size: 26px;
		color: #333333;
		line-height: 48px;
	}
	
	.trainRobFinish_box_tip_message > span {
		color: #ff953f;
	}
	
	.trainRobFinish_button {
		margin-top: 46px;
		padding: 0 69px;
		margin-bottom: 65px;
	}
	
	.trainRobFinish_button > div {
		width: 100%;
		height: 106px;
		background-color: #e8e8e8;
		border-radius: 53px;
		font-size: 34px;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.trainRobFinish_button > div.active {
		background-image: linear-gradient(-86deg, #50c9c3 0%, #0aeecb 100%);
	}
	
	.trainRobFinish_button > .trainRobFinish_btn {
		font-size: 34px;
		color: #4ccbc3;
		background: #fff;
		border:2px solid #46cec5;
		margin-top: 23px;
	}
	
	.trainRobFinish_friend {
		width: 100%;
		text-align: center;
		font-size: 28px;
		color: #999999;
		margin-bottom: 62px;
	}
	
	.trainRobFinish_friendList {
		width: 100%;
		padding: 0 70px 34px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
	}
	
	.trainRobFinish_friendList_every {
		width: 100px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		margin-right:15px;
	}
	
	.trainRobFinish_friendList_headerPic {
		width: 100%;
		height: 100px;
		margin-bottom: 18px;
	}
	
	.trainRobFinish_friendList_headerPic > img {
		width: 100%;
		height: 100%;
	}
	
	.trainRobFinish_friendList_nickname {
		width: 100%;
		font-size: 24px;
		color: #333333;
		text-align: center;
	}
	
	.trainRobFinish_friendList_more {
		margin-top: 55px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.trainRobFinish_friendList_more > img {
		width: 36px;
		height: 20px;
	}
	
	.trainRobFinish_line {
		height: 20px;
		width: 100%;
		background: #f4f5f9;
	}
	
	.trainRobFinish_rule_title {
		font-size: 28px;
		color: #999999;
		text-align: center;
		padding: 56px 0 46px;
	}
	
	.trainRobFinish_rule_content {
		font-size: 28px;
		color: #999999;
		text-align: left;
		line-height: 48px;
		padding: 0 50px 60px;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	import share from "../../../public/share.js";//分享函数
	import robTicketSpeedUpObj from "./trainRobTicketSpeedUp.js"; //抢票加速信息
	export default {
		name: "trainRobShare",
		data() { //数据
			return {
				orderNum:"",//订单号
				userId:"",
				robTicketSpeedUpObj:null,//抢票加速信息
				tip:"",//提示信息
				message:null,
				friendsList:[],
				isCouponShow:false,
				isPicFlag:true,//箭头收起放下
				isRobTicketEnd:false,//抢票是否结束
				userInfo:null,//用户信息
				isHelpFlag:false,//是否助力过
			}
		},
		mounted() {
			this.orderNum = this.$route.query.orderNum || "";
			this.userId = this.$route.query.userId || "";
 			this.robTicketSpeedUpObj = robTicketSpeedUpObj;//抢票加速信息
 			this.getOpenId();
		},
		created() {
			
		},
		methods: {
			share:share,
			getOpenId(){ //获取openid
				var code = this.$publicMethod.getQueryString("code");
	 			if(code){
	 				var param = '{"code":"' + code + '","ex":""}';
	 				this.$http.post(this.$baseUrl.baseurl + 'kpcx/wx/getUserInfo', param).then((res) => {
	 					if(res.data.Code == "0") {
	 						this.userInfo = res.data.Result.userInfo;
	 						localStorage.setItem('openid',this.userInfo.openid);
							this.getOrderStates();//订单状态
	 					} else { //code失效重新获取
	 						if (this.$publicMethod.WeChatFlag) {
			 					var url = encodeURIComponent(this.$baseUrl.domainName + '/trainRobShare?userId=' + this.userId + "&orderNum=" + this.orderNum);
			 					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx348ec18fec6bf757&redirect_uri=' +
			 						url + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
			 				} else {
			 					this.getOrderStates();//订单状态
			 				};
	 					};
	 				});
	 			}else{	
	 				if (this.$publicMethod.WeChatFlag) {
	 					var url = encodeURIComponent(this.$baseUrl.domainName + '/trainRobShare?userId=' + this.userId + "&orderNum=" + this.orderNum);
	 					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx348ec18fec6bf757&redirect_uri=' +
	 						url + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
	 				} else {
	 					this.getOrderStates();//订单状态
	 				};
	 			};	
			},
			getOrderStates(){ //获取抢票订单状态
				var param = {
					orderNum: this.orderNum,
					userId:this.userId,
				};
				this.$loading.show();
//				this.$http.post(this.$baseUrl.baseurl + "KPCX/app/ScrambleForTicketsHelp/getOrderStates", param).then((res) => {
				this.$http.post(this.$baseUrl.baseurl + "kpcx/app/ScrambleForTicketsHelp/getOrderStates", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						(res.data.Result.states != "D") && (this.tip = "抢票加速已结束");
						(res.data.Result.states != "D") && (this.isRobTicketEnd = true);
						this.getOrder();
						this.getFriendsList();//获取朋友列表
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			getOrder(){ //获取订单详情
				var param = {
					orderNum: this.orderNum,
					orderType: "7"
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/localOrderDetail", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						var message = res.data.Result.trainOrderDetailInfo;
						var str = "我正在抢到" + message.toStation + "的火车票，请求支援！"
						var url = this.$baseUrl.domainName + '/trainRobShare?userId=' + this.$store.state.common.userinfo.userID + "&orderNum=" + this.orderNum;
						this.share(str, str, "http://h5.kpcx179.com/wximages/train/8@2x.png", url);
						this.getHelpNum(message);
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			getHelpNum(message){//获取加速包数量
				var param = {
					orderNum: this.orderNum, 
					userId:this.userId,
				};
				this.$loading.show();
//				this.$http.post(this.$baseUrl.baseurl + "KPCX/app/ScrambleForTicketsHelp/getHelpUserCount", param).then((res) => {
				this.$http.post(this.$baseUrl.baseurl + "kpcx/app/ScrambleForTicketsHelp/getHelpUserCount", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						message.helpNum = res.data.Result.helpNum + message.grabGrade*10;//获得加速包的数量
						this.message = message;
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.isFirst && this.$loading.hide();
					console.log(err);
				});
			},
			getFriendsList(){ //获取好友列表
				var param = {
					orderNum: this.orderNum, 
					userId:this.userId,
				};
				this.$loading.show();
//				this.$http.post(this.$baseUrl.baseurl + "KPCX/app/ScrambleForTicketsHelp/getHelpUserList", param).then((res) => {
				this.$http.post(this.$baseUrl.baseurl + "kpcx/app/ScrambleForTicketsHelp/getHelpUserList", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						this.friendsList = res.data.Result.returnList;
						this.friendsList.forEach((val)=>{
							(val.uId == this.userInfo.uid) && (this.isHelpFlag = true);
							(val.uId == this.userInfo.uid) && (this.tip = "已为好友助力");
						},this);
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.isFirst && this.$loading.hide();
					console.log(err);
				});
			},
			changePicFlag(){
				this.isPicFlag = !this.isPicFlag;
			},
			toIndex(){
				this.$router.push({//跳转
					name:"index",
				});
			},
			help(){
				if(this.isHelpFlag) return;
				var param = {
					helpUId: this.userInfo.uid,
				    requestingUserId: this.userId,
				   	helpUserHeadPortrait: this.userInfo.headimgurl,
				    helpUserNickName: this.Change(this.userInfo.nickname),
				    orderNum: this.orderNum
				};
				this.$loading.show();
//				this.$http.post(this.$baseUrl.baseurl + "KPCX/app/ScrambleForTicketsHelp/addHelpUser", param).then((res) => {
				this.$http.post(this.$baseUrl.baseurl + "kpcx/app/ScrambleForTicketsHelp/addHelpUser", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						this.$toast("助力成功");
						this.getOrderStates();//订单状态
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.isFirst && this.$loading.hide();
					console.log(err);
				});
			},
			Change(pValue) {
		        return pValue.replace(/[^\u0000-\u00FF]/g, function($0) {
		          return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;")
		        });
		   	},
		},
		components: {
			trainHeader
		},
		filters:{
			getHelpNum(helpNum){
				return (Number(String(helpNum)[0]) + 1) *10 - helpNum;
			},
			getRobGrade(helpNum){	
				var index = helpNum ? Number(String(helpNum)[0]) : 0;
				return robTicketSpeedUpObj[index].speed;
			},
			ReChange: function(pValue) {
		        return unescape(pValue.replace(/&#x/g, '%u').replace(/\\u/g, '%u').replace(/;/g, ''));
		    },
		},
	};
</script>